How To Display Code As Text


    How to display text as code

    <pre>
        <code>
            <p>type code here</p>
        </code>
    </pre>

Using Multiple Backgrounds

Seperate URLs by a comma

Background Repeat and Background Position will apply to all background images in order they appear. The sexy bikini girl will appear in the bottom right. The goth girl will appear on the left hand side. The gradiant will start on the left and go to the right. Multiple Backgrounds From Firefox


    body {
    background-image: url("sexy-bikini-girl-3.png"), url("mean-goth-girl.jpg"), linear-gradient(to right, blue / 100%);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position:
    bottom right,
    left,
    right;
    }

Background Size

With a 1920 x 1920 px image you can make it appear as 300 x 300 px (or any other number) and it will automatically tile to fill your background.

Unless denoted otherwise, the background will automatically repeat to fill the space of the div. You can also stretch and distort the image with background-width and background-height.

You can also use background-size: cover; and background-size: contain; to resize as well.

Background Size from Mozilla


    <div class="tiledBackground"></div>

    

    .tiledBackground {
        background-image: url("sunshine-logo,png");
        background-size: 150px;
        width: 300px;
        height: 300px;
    }

    .coverBackground {
        background-image: url("band-cover-art.png");
        background-size: cover;
    }

    .containBackground {
        background-image: url("tupperware-container.png");
        background-size: contain;
    }

Variables

Most often used for colors, or font formats.

Change the variable in CSS and it will change every HTML element with it all across your site.


    <h7>Texting while driving off a cliff is not safe, you could drive off a cliff</h7>
    <h8>This is heading number 8 coming your way!</h8>

    

    ::root: {
    --boudica-red: rgb(32, 229, 121);
    }

    h7 {
    color: var(--boudica-red);
    }
    h8 {
    color: var(--boudica-red);
    }

Colors


    color: {This changes the foreground color of an element}
    background-color: {This changes the background color of an element}

    

    p, h1, h2, h3, h8, h9, etc. {
    color: {This changes the color of text, underlines, strikethroughs, etc.}
    text-shadow:
    text-decoration-color:

Image Shape Clipping Masks

These are mostly used to make images look like stars, arrows, triangles, you get the picture. Almost any shape you can think of. The bright side is, these help make images much lower file sizes then using .PNGs while still keeping that cool, non-rectangular look. Check out CSS Clip Path maker to make your own clipping masks and copy the code.


    clip-path: {This lets you choose a shape (triangle, polygon, star, etc) and then the verticies.}
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); This clip path is a rightward arrow
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); This clip path is a triangle 

    

    <img src(underwear.png)>
    This image will be cut out to look like a triangle based on the clip path from above

Masking With Gradiants

There are two ways to make an image fade away. The first is to use a gradiant on top of the image and to have the gradiant fade to transparent. Alternatively, you can also use a gradiant as a mask. Guide to gradiant masking.


    .image-mask
    mask-image:{background: linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 0.57) 50%);}

    

    <img src(beach.jpg)>
    Using the above mask-image gradiant, the beach.jpg will fade out along with the gradiant

CSS Carousels

Carousels are very common across the web but can be quite tricky with JavaScript. Luckily they can be fairly simple with CSS.Guide to making CSS Carousels. CSS does this by including a list of pre-defined psuedo classes and elements to make carousels possible.


    ::scroll-button( ) Generated inside a scroll container, these pseudo-elements represent scroll buttons, which scroll the container.
    ::scroll-marker-group Generated inside a scroll container; used to collect together and lay out scroll markers.
    ::scroll-marker
    :target-current Used to select the currently active scroll marker and style it.
    :target-before and :target-after Used to select and style scroll markers before and after the currently active scroll marker.
    ::column Represents the individual columns generated when a container is set to display its content in multiple columns.

    mask-image:{background: linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 0.57) 50%);}

    

    <img src(beach.jpg)>
    Using the above mask-image gradiant, the beach.jpg will fade out along with the gradiant
This is an example of an outline. Very different from a border. It is an illusion, it does not take up space.